<template>
  <div class="table-box">
    <!-- <input type="button" value="打印插槽对象" @click="printSlot" /> -->
    <el-table :data="tableData" v-bind="table">
      <!-- <el-table-column v-for="(col, i) in columns" :key="i" v-bind:label="col.label"> </el-table-column> -->
      <el-table-column v-for="(col, i) in columns" :key="i" v-bind="col">
        <template v-if="$scopedSlots[col.template]" #default="scope">
          <slot :name="col.template" v-bind="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="!hidePagination"
      v-bind="pagination"
      :total="total"
      :page-size="pageSize"
      :current-page="pageNo"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    table: {
      type: Object,
      default: () => ({}),
    },
    columns: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    pagination: {
      type: Object,
      default: () => ({}),
    },
    total: {
      type: Number,
      default: 0,
    },
    pageSize: {
      type: Number,
      default: 5,
    },
    pageNo: {
      type: Number,
      default: 1,
    },
    // 是否隐藏分页
    hidePagination: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    // printSlot() {
    //   console.log(this.$scopedSlots);
    // },
    currentChange(newPgaeNo) {
      this.$emit("update:pageNo", newPgaeNo);
      this.$emit("reload");
    },
    sizeChange(newPageSize) {
      this.$emit("update:pageNo", 1);
      this.$emit("update:pageSize", newPageSize);
      this.$emit("reload");
    },
  },
};
</script>

<style lang="scss" scoped>
.table-box {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}
</style>
